<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <title></title>
  <script>
  
  var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}

function myFunction()
{
loadXMLDoc("skuska.php",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("response").innerHTML=xmlhttp.responseText;
    }
  });
}
  
      var drawRect = function(id,x1,y1,x2,y2, color) {

          var width = Math.abs(x1 - x2);
          var height = Math.abs(y1 - y2);
          var posX  = (x1 < x2) ? x1 : x2;
          var posY  = (y1 < y2) ? y1 : y2;

          $('#'+id).css({
            left: posX,
            top: posY,
            width: width,
            height: height,
            position:'absolute',
            opacity: 0.4,
            backgroundColor: color
          });

    };  
  
  $(document).ready(function() {
    
    var drag = false;
    var x1;
    var x2;
    var y1;
    var y2;
    var id;
  
    $('img').bind('dragstart', function(event) { event.preventDefault(); });
  
    $(".special2").draggable({containment: "parent"});
    
    $(".special").mousedown(function(e){

     drag = true;
	   var x = e.pageX - this.offsetLeft;
	   var y = e.pageY - this.offsetTop;
	   
	   id ='c_'+new Date().getTime();
     var rect = "<div id='"+id+"'class='rect'></div>";

      $("#main").append(rect);
	   
	    x1 = e.pageX;
      y1 = e.pageY; 

      $('#down').html(x +', '+ y);
    });
    
    $(".rect").mousemove(function(e){
    
    var x = e.pageX - this.offsetLeft;
	  var y = e.pageY - this.offsetTop;

      if (drag) {
        x2 = e.pageX;
        y2 = e.pageY;
        drawRect(id, x1, y1, x2, y2, '#F00');
        $('#up').html(x +', '+ y);        
      }
    });
    
    $(".special").mousemove(function(e){
    
    var x = e.pageX - this.offsetLeft;
	  var y = e.pageY - this.offsetTop;

      if (drag) {
        x2 = e.pageX;
        y2 = e.pageY;
        drawRect(id, x1, y1, x2, y2, '#F00');
        $('#up').html(x +', '+ y);        
      }
    });
   
    $(".special").mouseup(function(e){
    
     drag = false;

	   var x = e.pageX - this.offsetLeft;
	   var y = e.pageY - this.offsetTop;
	   
	   myFunction();

      $('#up').html(x +', '+ y);
    });
  });

  </script>
  </head>

  <body>
    <div style="width: 700px; height: 700px; background-color: #777;" id="main">
      <img src="img/zem.jpg" class="special">
      <div style="width: 50px; height: 50px; background-color: #BBB;" class="special2"></div>
    </div>
    
  <h2 id="down">
  0, 0
  </h2>
  <h2 id="up">
  0, 0
  </h2>
  <div id="response"></div>
<script>

</script>
  </body>
</html>
